'use client'

import Link from "next/link"
import Image from "next/image"

import NavItem from "./nav-item"
import UserAvatar from "@/components/base/layout/user-avatar"
import { ThemeToggle } from "@/components/base/theme/theme-toggle"
import MobileSidebar from "@/components/base/layout/mobile-sidebar"

import { config } from "@/config/site"
import UserButton from "@/components/auth/user-button"

const Header = () => {
    return (
        <header className="fixed p-4 h-14 top-0 inset-0 z-50 bg-background/80 backdrop-blur-sm border-b data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
            <div className="hidden md:flex w-full h-full items-center justify-between gap-x-2">
                <Link href='/' className='mr-6 flex items-center space-x-2'>
                    <Image src='/images/logo.png' alt="Logo" width={147} height={100} />
                    {/* <span className='hidden font-bold sm:inline-block'>
                        {config.name}
                    </span> */}
                </Link>

                <div className="max-md:flex-1 flex items-center justify-between gap-x-2">
                    <div className="w-full flex-1 flex flex-row">
                        {config.navs.map((nav, index) => (
                            <NavItem key={index} label={nav.title} href={nav.link} icon={nav.icon} />
                        ))}
                    </div>
                    <div className="flex items-center gap-4">
                        <ThemeToggle />
                        {/* <UserAvatar className="hidden md:flex" /> */}
                        <UserButton className="max-md:hidden" />
                    </div>
                </div>
            </div>
            <div className="hidden max-md:flex w-full h-full items-center justify-center relative">
                <Link href='/' className='w-full flex items-center justify-center space-x-2'>
                    <Image src='/images/logo.png' alt="Logo" width={147} height={100} />
                    {/* <span className='font-bold sm:inline-block'>
                        {config.name}
                    </span> */}
                </Link>
                <div className="absolute right-0 flex items-center">
                    <MobileSidebar />
                </div>
            </div>
        </header >
    )
}

export default Header
